<template>
    <div>
        <a-row>
            <!-- v-userAuth="'F2'" -->
            <a-row class='mytitle'>
                <div style="cursor: pointer;width: 360px" @click="handleNavigate">
                    <a-icon type="left" />
                    <span>{{ $t('返回') }}</span>
                    <span style="margin-left: 8px;">|</span>
                    <span style="margin-left: 8px">SMB/CIFS {{ $t('Detail') }}</span>
                    <span v-if="form.name" style="margin-left: 8px;">/</span>
                    <span v-if="form.name" style="margin-left: 8px">{{ form.name }}</span>
                </div>
            </a-row>

            <div ref="homeRef">
                <a-row style="margin:1em;" id="basicRef">
                    <div style="background-color:white;box-shadow:0 0 6px 2px rgba(0,0,0,0.15);padding-bottom: 8px;">
                        <div style="padding:8px 22px;" class="size14 cont">{{ $t('基础信息') }}</div>
                        <div class="line"></div>
                        <div style="padding:8px 22px;">
                            <a-row class="size14" style="display: flex;">
                                <div style="width: 75px" class="shallow">
                                    {{ $t('共享名称') }}:
                                </div>
                                <div style="flex: 1" class="cont">
                                    {{ form.name }}
                                </div>
                            </a-row>
                            <a-row class="size14 mt-4" style="display: flex;">
                                <div style="width: 75px" class="shallow">
                                    {{ $t('目录路径') }}:
                                </div>
                                <div style="flex: 1" class="cont">
                                    {{ form.path }}
                                </div>
                            </a-row>
                            <a-row class="size14 mt-4" style="display: flex;">
                                <div style="width: 75px" class="shallow">
                                    {{ $t('访问模式') }}:
                                </div>
                                <div style="flex: 1" class="cont">
                                    {{ accessMap.get(form.access_type) }}
                                </div>
                            </a-row>

                            <a-row v-if="form.access_type == 1" class="size14 mt-4" style="display: flex;">
                                <div style="width: 75px" class="shallow">
                                    {{ $t('共享方式') }}:
                                </div>
                                <div style="flex: 1" class="cont">
                                    {{ modeMap.get(form.share_mode) }}
                                </div>
                            </a-row>
                            <a-row v-if="form.access_type == 1" class="size14 mt-4" style="display: flex;">
                                <div style="width: 75px" class="shallow">
                                    {{ $t('共享类型') }}:
                                </div>
                                <div style="flex: 1" class="cont">
                                    {{ shareMap.get(form.share_type) }}
                                </div>
                            </a-row>
                            <a-row v-if="form.access_type == 2" class="size14 mt-4" style="display: flex;">
                                <div style="width: 75px" class="shallow">
                                    {{ $t('操作权限') }}:
                                </div>
                                <div style="flex: 1" class="cont">
                                    {{ permissionMap.get(form.authorization) }}
                                </div>
                            </a-row>
                        </div>
                    </div>
                </a-row>

                <a-row v-if="form.access_type == 1" style="margin:1em;">
                    <div style="background-color:white;box-shadow:0 0 6px 2px rgba(0,0,0,0.15);">
                        <div style="padding:8px 22px;" class="size14 title">{{ $t('共享用户(组)') }}</div>
                        <div class="line"></div>
                        <div style="padding:8px 22px;">
                            <a-spin :spinning="loading">
                                <a-table style="margin-top:8px" rowKey="user" :columns='shareColumns' :loading="loading"
                                    :dataSource='shareList' :locale="defaultSetting" :pagination='pagination'
                                    size='small'>
                                    <template slot="share_type" slot-scope="share_type">
                                        <span>{{ shareMap.get(share_type) }}</span>
                                    </template>

                                    <template slot="user_type" slot-scope="user_type, record">
                                        <span>{{ userDetailMap.get(String(record.share_type) + String(user_type))
                                            }}</span>
                                    </template>

                                    <template slot="permission" slot-scope="permission">
                                        <span>{{ permissionMap.get(permission) }}</span>
                                    </template>
                                </a-table>
                            </a-spin>
                        </div>
                    </div>
                </a-row>

                <a-row style="margin:1em">
                    <div style="background-color:white;box-shadow:0 0 6px 2px rgba(0,0,0,0.15);;">
                        <div style="padding:8px 22px;" class="size14 title">{{ $t('健康状态') }}</div>
                        <div class="line"></div>
                        <div style="padding:8px 22px;">
                            <a-spin :spinning="loading">
                                <a-table style="margin-top:8px" rowKey="name" :columns='healthColumns'
                                    :loading="loading" :dataSource='healthList' :locale="defaultSetting"
                                    :pagination='pagination' size='small'>

                                    <template slot="status" slot-scope="status, record">
                                        <div v-if="status">
                                            <span class="dot success"></span>
                                            {{ $t('健康') }}
                                        </div>
                                        <div v-else>
                                            <span class="dot fail"></span>
                                            {{ $t('异常') }}
                                        </div>
                                    </template>

                                    <template slot="operate" slot-scope='text, record'>
                                        <div v-if="!record.status">
                                            <a-tooltip placement='top'>
                                                <template slot='title'>
                                                    <span>{{ $t('手动修复') }}</span>
                                                </template>
                                                <Iconfont class="icon tip-icon" type="icon-configuration16f"
                                                    @click="handleRefresh(record)">
                                                </Iconfont>
                                            </a-tooltip>
                                        </div>
                                        <span v-else>-</span>
                                    </template>
                                </a-table>
                            </a-spin>
                        </div>
                    </div>
                </a-row>
            </div>

            <!-- <refreshDialog ref="refreshRef" @get-list="getShareList" /> -->

        </a-row>
    </div>
</template>

<script>
import NoAuthPage from '@/components/common/NoAuthPage'
import EmptyData from '@/components/common/EmptyData'
import { shareMap, userDetailMap, permissionMap, accessMap, modeMap } from "./data";
import refreshDialog from './refreshDialog.vue';

export default {
    name: 'authenticationDetail',
    components: { EmptyData, NoAuthPage, refreshDialog },
    data() {
        return {
            loading: false,
            form: {
                id: '',
                name: '',
                path: '',
                share_type: 0,
                access_type: 1,
                share_mode: 1,
            },
            shareList: [],
            healthList: [],
            defaultSetting: {
                emptyText: <EmptyData />
            },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['5', '15', '20', '25'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            shareColumns: [
                { title: this.$t('名称'), dataIndex: 'user', key: 'user' },
                { title: this.$t('共享类型'), dataIndex: 'share_type', scopedSlots: { customRender: 'share_type' } },
                { title: this.$t('用户类型'), dataIndex: 'user_type', scopedSlots: { customRender: 'user_type' } },
                { title: this.$t('权限'), dataIndex: 'permission', scopedSlots: { customRender: 'permission' } },
            ],
            healthColumns: [
                { title: this.$t('节点名称'), dataIndex: 'name', key: 'name' },
                { title: this.$t('节点健康状态'), dataIndex: 'status', scopedSlots: { customRender: 'status' } },
                { title: this.$t('Operate'), scopedSlots: { customRender: 'operate' } }
            ],
            shareMap, userDetailMap, permissionMap, accessMap, modeMap,
        }
    },
    mounted() {
        this.form = JSON.parse(decodeURIComponent(this.$route.query.item))
        this.getShareList(this.form.id)
        // this.$nextTick(() => {
        //     const height = (this.$refs.homeRef.offsetHeight - document.querySelector('#basicRef').clientHeight - 136) / 2
        //     console.log(this.$refs.homeRef)
        //     for (const item of [...document.querySelectorAll('.ant-table-small')]) {
        //         item.style.maxHeight = `${height}px`
        //     }
        // })
    },
    methods: {
        async getShareList(share_id) {
            this.loading = true
            const { data } = await this.$api.directory.getShareInfoApi({ share_id })
            // for (let index = 0; index < 10; index++) {
            //     data.samba_user.push({ user: index })
            // }
            this.shareList = data.samba_user
            const list = []
            for (const key in data.node_health) {
                list.push({ name: key, status: data.node_health[key] })
            }
            // for (let index = 0; index < 10; index++) {
            //     list.push({ name: index })
            // }
            this.healthList = list
            this.loading = false
        },
        handleNavigate() {
            this.$router.push({ path: '/fsview' })
        },
        async handleRefresh(item) {
            let _this = this
            this.$confirm({
                title: this.$t('修复节点'),
                content: this.$t('修复节点名为') + `${item.name}`,
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'primary',
                icon: 'tool',
                async onOk() {
                    const { data } = await _this.$api.directory.repairShareApi({ node: item.name, share_id: _this.form.id })
                    if (data.flag == '0') {
                        _this.$message.success(`${_this.$t('Node')}${item.name}${_this.$t('Repair-success')}`)
                        _this.getShareList(_this.form.id)
                    } else {
                        _this.$message.error(`${_this.$t('Node')}${item.name}${_this.$t('Repair-fail')}${_this.$t('错误信息')} ：${data.msg}`)
                    }
                },
                onCancel() {
                }
            })

        }
    }
}
</script>


<style scoped>
.size14 {
    font-size: 14px;
}

.line {
    width: 100%;
    border-bottom: solid 1px #cccccc;
    line-height: 0.9;
}

.shallow {
    color: #666666;
}

.cont {
    color: #333333;
    /* font-weight: bolder; */
}

::v-deep .ant-table-small {
    overflow-y: auto;
    max-height: 120px;
}

.success {
    background-color: #129a9a;
}

.fail {
    background-color: #b62832
}
</style>
